<template>
  <div>
    <div class="left"></div>
    <!-- 添加按钮 -->
    <div class="admin-top">
        <p>商品管理</p>
      <el-button
        type="primary"
        icon="el-icon-edit"
        circle
        class="add"
        @click="show"
      >
        添加</el-button
      >
      <el-button
        class="quit"
        icon="el-icon-caret-right"
        type="text"
        @click="open"
        >退出</el-button
      >
    </div>
    <el-tabs type="border-card" >
      <el-table :data="list" border style="width: 100%; margin: 10px auto">
        <el-table-column border prop="price" label="兑换商品所需积分" width="150" align="center">
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="550" align="center">
        </el-table-column>
        <el-table-column prop="url" label="商品图片" width="400" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.image" alt=""  align="center"  />
          </template>
        </el-table-column>
        <el-table-column prop="set" label="操作" width="643"  align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.row)" class="edit-btn">编辑</el-button>
            <el-popconfirm title="确定删除吗？"  @confirm="confirm(scope.row)">
                  <!-- <el-button slot="reference">删除</el-button> -->
                  <el-button  slot="reference" size="mini" type="danger" class="delete-btn">删除</el-button>
            </el-popconfirm>
            <!-- </el-popconfirm> -->
          </template>
        </el-table-column>
      </el-table>
    </el-tabs>
    <!-- 表单 -->
    <el-dialog
      title="提示"
      width="600px"
      :before-close="handleClose"
      :visible.sync="addVisible"
>
    <!-- 添加商品表单 -->
      <el-form ref="form" :model="form" label-width="80px" style="width: 500px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-input v-model="form.image"></el-input>
        </el-form-item>
        <el-form-item label="兑换所需积分">
          <el-input v-model="form.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button @click="addCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!--编辑商品表单-->
    <el-dialog
      title="编辑商品"
      width="600px"
      :before-close="handleClose"
      :visible.sync="dialogVisible"
    >
      <el-form ref="form" :model="edit" label-width="80px" style="width: 500px">
        <el-form-item label="商品名称">
          <el-input v-model="edit.name"></el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-input v-model="edit.image"></el-input>
        </el-form-item>
        <el-form-item label="兑换所需积分">
          <el-input v-model="edit.price"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="change">立即创建</el-button>
          <el-button @click="onCancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "About",
      list: [],//初始商品列表
      form: {//添加商品
        _id:'',
        name:'',
        price:'',
        image:''
      },
      edit:{//编辑商品列表
        id:'',
        name:'',
        price:'',
        image:''
      },
      dialogVisible: false,//编辑商品列表弹框
      addVisible:false//新增商品列表弹框
    };
  },
  created() {
      this.getList()//初始列表
  },
  methods: {
    handleEdit(row) {//编辑商品弹框将初始列表内值赋给新增商品弹框
      this.dialogVisible = true;
      this.edit.id = row._id
      this.edit.name = row.name
      this.edit.price = row.price
      this.edit.image = row.image
      this.getList()
    },
    async change(){//商品弹框修改内容的put请求
      const data = await this.yPut("/admin/shopItem",{
        data:{
          _id: this.edit.id,
          name: this.edit.name,
          price: this.edit.price,
          image: this.edit.image
        }
      }
      );
      console.log(data)
      this.dialogVisible=false

    },
    async getList() {//列表渲染get请求
      const data = await this.yGet("/admin/shopList");
      if (data) {
        console.log("data", data);
        this.list = data;
      }
    },
    show() {
      this.addVisible = true;
    },
     async confirm(row) {//删除整行
       console.log(row);
      const data = await this.yDel("/admin/shopItem",{
        id:row._id
      });
      console.log(1);
      console.log(data);
      this.getList()
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    async onSubmit() {//
      const data = await this.yPost("/admin/shopItem",{
        name: this.form.name,
        price: this.form.price,
        image:this.form.image
      });
      console.log('...', data);
      this.list.push({
        image: this.form.image,
        price: this.form.price,
        name: this.form.name,
      });
      this.addVisible = false;
    },
    addCancel() {
      this.addVisible = false;
    },
    onCancel() {
      this.dialogVisible = false;
    },
    open() {
      this.$confirm(
        "检测到未保存的内容，是否在离开页面前保存修改？",
        "确认信息",
        {
          distinguishCancelAndClose: true,
          confirmButtonText: "保存",
          cancelButtonText: "放弃修改",
        }
      )
        .then(() => {
          this.$message({
            type: "info",
            message: "保存修改,并返回登录页面",
          });
          this.$router.push({
            name: "Home",
          });
        })
        .catch((action) => {
          this.$message({
            type: "info",
            message:
              action === "cancel" ? "放弃保存停留当前页面" : "停留在当前页面",
          });
        });
    },
  },
};
</script>

<style scoped>
.admin-top {
  width: 90%;
  height: 100px;
  margin: auto;
}
.el-table {
  margin-top: 100px;
}
.el-tabs {
  width: 80%;
  margin: auto;
}
.el-button.is-circle {
  border-radius: 10%;
}
img {
  width: 130px;
  height: 130px;
}
.quit {
  position: fixed;
  top: 30px;
  right: 60px;
  border-radius: 10%;
  color: #fff;
  width: 60px;
  height: 40px;
  background-color: rgb(65 157 247);
}
.el-button {
  margin-left: 50px;
}
el-dialog__wrapper {
  width: 500px;
}

.left {
  width: 60px;
  position: fixed;
  left: 0;
  bottom: 0;
  top: 0;
  background-color: rgb(53, 52, 52);
}
</style>